<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        textarea {
            width: 100%;
            height: 200px;
        }

        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<h1>Frame Generator</h1>
<input type="file" id="fileInput"/>
<br><br>
<label for="targetAddr">Target Address (Hex):</label>
<input type="text" id="targetAddr" value="55"/>
<br><br>
<button onclick="generateFrame()">Generate Frame</button>
<h2>Generated Frame (Hex):</h2>
<textarea id="output" readonly></textarea>

<script>
    const crc_ta = [0x0000, 0x8005, 0x800F, 0x000A, 0x801B, 0x001E, 0x0014, 0x8011,
        0x8033, 0x0036, 0x003C, 0x8039, 0x0028, 0x802D, 0x8027, 0x0022,
        0x8063, 0x0066, 0x006C, 0x8069, 0x0078, 0x807D, 0x8077, 0x0072,
        0x0050, 0x8055, 0x805F, 0x005A, 0x804B, 0x004E, 0x0044, 0x8041,
        0x80C3, 0x00C6, 0x00CC, 0x80C9, 0x00D8, 0x80DD, 0x80D7, 0x00D2,
        0x00F0, 0x80F5, 0x80FF, 0x00FA, 0x80EB, 0x00EE, 0x00E4, 0x80E1,
        0x00A0, 0x80A5, 0x80AF, 0x00AA, 0x80BB, 0x00BE, 0x00B4, 0x80B1,
        0x8093, 0x0096, 0x009C, 0x8099, 0x0088, 0x808D, 0x8087, 0x0082,
        0x8183, 0x0186, 0x018C, 0x8189, 0x0198, 0x819D, 0x8197, 0x0192,
        0x01B0, 0x81B5, 0x81BF, 0x01BA, 0x81AB, 0x01AE, 0x01A4, 0x81A1,
        0x01E0, 0x81E5, 0x81EF, 0x01EA, 0x81FB, 0x01FE, 0x01F4, 0x81F1,
        0x81D3, 0x01D6, 0x01DC, 0x81D9, 0x01C8, 0x81CD, 0x81C7, 0x01C2,
        0x0140, 0x8145, 0x814F, 0x014A, 0x815B, 0x015E, 0x0154, 0x8151,
        0x8173, 0x0176, 0x017C, 0x8179, 0x0168, 0x816D, 0x8167, 0x0162,
        0x0120, 0x8125, 0x812F, 0x012A, 0x813B, 0x013E, 0x0134, 0x8131,
        0x0110, 0x8115, 0x811F, 0x011A, 0x810B, 0x010E, 0x0104, 0x8101,
        0x8303, 0x0306, 0x030C, 0x8309, 0x0318, 0x831D, 0x8317, 0x0312,
        0x0330, 0x8335, 0x833F, 0x033A, 0x832B, 0x032E, 0x0324, 0x8321,
        0x0360, 0x8365, 0x836F, 0x036A, 0x837B, 0x037E, 0x0374, 0x8371,
        0x8353, 0x0356, 0x035C, 0x8359, 0x0348, 0x834D, 0x8347, 0x0342,
        0x03C0, 0x83C5, 0x83CF, 0x03CA, 0x83DB, 0x03DE, 0x03D4, 0x83D1,
        0x83F3, 0x03F6, 0x03FC, 0x83F9, 0x03E8, 0x83ED, 0x83E7, 0x03E2,
        0x03A0, 0x83A5, 0x83AF, 0x03AA, 0x83BB, 0x03BE, 0x03B4, 0x83B1,
        0x0390, 0x8395, 0x839F, 0x039A, 0x838B, 0x038E, 0x0384, 0x8381,
        0x0280, 0x8285, 0x828F, 0x028A, 0x829B, 0x029E, 0x0294, 0x8291,
        0x82B3, 0x02B6, 0x02BC, 0x82B9, 0x02A8, 0x82AD, 0x82A7, 0x02A2,
        0x82E3, 0x02E6, 0x02EC, 0x82E9, 0x02F8, 0x82FD, 0x82F7, 0x02F2,
        0x02D0, 0x82D5, 0x82DF, 0x02DA, 0x82CB, 0x02CE, 0x02C4, 0x82C1,
        0x8243, 0x0246, 0x024C, 0x8249, 0x0258, 0x825D, 0x8257, 0x0252,
        0x0270, 0x8275, 0x827F, 0x027A, 0x826B, 0x026E, 0x0264, 0x8261,
        0x0220, 0x8225, 0x822F, 0x022A, 0x823B, 0x023E, 0x0234, 0x8231,
        0x8213, 0x0216, 0x021C, 0x8219, 0x0208, 0x820D, 0x8207, 0x0202]

    function toUint8Array(inputArray) {
        const result = [];

        inputArray.forEach((num) => {
            if (num <= 0xFF) {
                result.push(num);
            } else {
                const bytes = [];
                while (num > 0) {
                    bytes.unshift(num & 0xFF)
                    num >>= 8;
                }
                result.push(...bytes);
            }
        });

        return new Uint8Array(result);
    }

    function buypassCRC16(buf) {
        let crc = 0x0000;
        for (let b of buf) {
            let tmp = ((crc >> 8) ^ b) & 0xFF;
            crc = ((crc << 8) ^ crc_ta[tmp]) & 0xFFFF;
        }
        return crc;
    }

    function splitIntoBytes(byteCount, number) {
        let result = [];

        for (let i = 0; i < byteCount; i++) {
            let byte = (number >> (8 * (byteCount - 1 - i))) & 0xFF;
            result.push(`0x${byte.toString(16).padStart(2, '0')}`);
        }

        return result;
    }

    function generateFrame() {
        let byte_array = []
        const fileInput = document.getElementById('fileInput');
        const targetAddr = document.getElementById('targetAddr').value;

        if (!fileInput.files[0]) {
            alert('Please select a SPI file.');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
            const content = new Uint8Array(e.target.result);
            const fileLength = content.length;
            let index = 0;

            // 有余数则+1再+1首帧, 无余数只加首帧
            const packTotal = Math.ceil(fileLength / 252) + 1;

            console.log(packTotal)
            // 封装首帧
            let firstFramePart = [
                0xeb90, 0x22, `0x${targetAddr}`, 0xff, 0xbd, "0x00", "0x00", 0x33,
                packTotal,
                ...splitIntoBytes(4, fileLength), buypassCRC16(content)
            ];
            const uint8Array = toUint8Array(firstFramePart)
            const checksum = uint8Array.slice(5, uint8Array.length).reduce((x, y) => x + y, 0) & 0xff;
            // 第一帧
            const fullFstFrame = toUint8Array([...uint8Array, ...new Array(260 - 17 + 1).fill(0), checksum, 0x09d7])
            byte_array.push(fullFstFrame)


            let start = 0;
            while (start < fileLength) {
                let next_ = start + 252;
                let segment = [];
                if (next_ <= fileLength) {
                    index += 1;
                    let dataSegment = content.slice(start, next_);
                    segment = [
                        ...[0xeb90, 0x22, `0x${targetAddr}`, 0xff, 0xbe, ...splitIntoBytes(2, index), 0xfc],
                        ...Array.from(dataSegment),
                    ];
                    let checksum = toUint8Array(segment).slice(5, 261).reduce((sum, val) => sum + val, 0) & 0xff;
                    const segmentBuffer = toUint8Array([...segment, checksum, 0x09d7])
                    console.log(index, segmentBuffer)
                    start += 252;
                    byte_array.push(segmentBuffer)

                } else {
                    break;
                }
            }
            // 将所有 Uint8Array 合并为一个大 Uint8Array
            let totalLength = byte_array.reduce((sum, array) => sum + array.length, 0);
            let combinedArray = new Uint8Array(totalLength);
            let offset = 0;
            byte_array.forEach(array => {
                combinedArray.set(array, offset);
                offset += array.length;
            });
            // 创建一个 Blob 对象，将 Uint8Array 包装为文件
            let blob = new Blob([combinedArray], {type: 'application/octet-stream'});

            // 创建一个下载链接
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'combined_file.bin'; // 设置下载文件的名称
            link.click(); // 自动触发下载

        };

        reader.readAsArrayBuffer(fileInput.files[0]);
    }
</script>
</body>
</html>
